
{% style %}
  {%- assign key = 'default&light&dark&customized' -%}
  {%- assign key_arr = key | split: '&' -%}
  {%- for i in key_arr -%}
    .template-color-{{ i }} .bg-color,
    .template-color-{{ i }}.bg-color {
      {%- assign bg_color_id = 'bg_color_' | append: i -%}
      background-color: {{ section.settings[bg_color_id] }};
    }
    .template-color-{{ i }} .on-bg-color,
    .template-color-{{ i }}.on-bg-color {
      {%- assign on_bg_color_id = 'on_bg_color_' | append: i -%}
      color: {{ section.settings[on_bg_color_id] }};
    }
    .template-color-{{ i }} .surface-color {
      {%- assign surface_color_id = 'surface_color_' | append: i -%}
      background-color: {{ section.settings[surface_color_id] }};
    }
    .template-color-{{ i }} .on-surface-color {
      {%- assign on_surface_color_id = 'on_surface_color_' | append: i -%}
      color: {{ section.settings[on_surface_color_id] }};
    }
    {%- assign use_on_color_id = 'use_on_color_' | append: i -%}
    {%- if section.settings[use_on_color_id] -%}
      .template-btn-variable-{{ i }} .btn-primary {
        --se-btn-color: {{ section.settings[bg_color_id] }};
        --se-btn-bg: {{ section.settings[on_bg_color_id] }};
        --se-btn-border-color: {{ section.settings[on_bg_color_id] }};
      }
      .template-btn-variable-{{ i }} .card-wrap .btn-link {
        --se-btn-color: {{ section.settings[on_surface_color_id] }};
        --se-btn-hover-color: var(--se-primary);
        --se-btn-active-color: var(--se-primary);
      }
    {%- endif -%}
  {%- endfor -%}

{% endstyle %}

{% schema %}
{
  "name": "Template style",
  "class": "template-style",
  "settings": [
    {
      "type": "header",
      "content": "Template Customized Style",
      "info": "Customize style for pages built by this template"
    },
    {
      "type": "header",
      "content": "Default Color Schema"
    },
    {
      "type": "color",
      "id": "bg_color_default",
      "default": "#FFFFFF",
      "label": "Background Color"
    },
    {
      "type": "color",
      "id": "on_bg_color_default",
      "default": "#000000",
      "label": "On Background Color"
    },
    {
      "type": "color",
      "id": "surface_color_default",
      "default": "#F5F5F5",
      "label": "Surface Color"
    },
    {
      "type": "color",
      "id": "on_surface_color_default",
      "default": "#000000",
      "label": "On Surface Color"
    },
    {
      "type": "checkbox",
      "id": "use_on_color_default",
      "default": false,
      "label": "Use On Color for Button"
    },
    {
      "type": "header",
      "content": "Light Color Schema"
    },
    {
      "type": "color",
      "id": "bg_color_light",
      "default": "#F5F5F5",
      "label": "Background Color"
    },
    {
      "type": "color",
      "id": "on_bg_color_light",
      "default": "#000000",
      "label": "On Background Color"
    },
    {
      "type": "color",
      "id": "surface_color_light",
      "default": "#FFFFFF",
      "label": "Surface Color"
    },
    {
      "type": "color",
      "id": "on_surface_color_light",
      "default": "#000000",
      "label": "On Surface Color"
    },
    {
      "type": "checkbox",
      "id": "use_on_color_light",
      "default": false,
      "label": "Use On Color for Button"
    },
    {
      "type": "header",
      "content": "Dark Color Schema"
    },
    {
      "type": "color",
      "id": "bg_color_dark",
      "default": "#262626",
      "label": "Background Color"
    },
    {
      "type": "color",
      "id": "on_bg_color_dark",
      "default": "#FFFFFF",
      "label": "On Background Color"
    },
    {
      "type": "color",
      "id": "surface_color_dark",
      "default": "#000000",
      "label": "Surface Color"
    },
    {
      "type": "color",
      "id": "on_surface_color_dark",
      "default": "#FFFFFF",
      "label": "On Surface Color"
    },
    {
      "type": "checkbox",
      "id": "use_on_color_dark",
      "default": false,
      "label": "Use On Color for Button"
    },
    {
      "type": "header",
      "content": "Customized Color Schema"
    },
    {
      "type": "color",
      "id": "bg_color_customized",
      "default": "#F5F5F5",
      "label": "Background Color"
    },
    {
      "type": "color",
      "id": "on_bg_color_customized",
      "default": "#000000",
      "label": "On Background Color"
    },
    {
      "type": "color",
      "id": "surface_color_customized",
      "default": "#B398D3",
      "label": "Surface Color"
    },
    {
      "type": "color",
      "id": "on_surface_color_customized",
      "default": "#000000",
      "label": "On Surface Color"
    },
    {
      "type": "checkbox",
      "id": "use_on_color_customized",
      "default": false,
      "label": "Use On Color for Button"
    }
  ]
}
{% endschema %}